<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.WatchInput.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.WatchInput.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.WatchInput.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;input[type=text]&nbsp;또는&nbsp;textarea와&nbsp;같은&nbsp;입력&nbsp;컨트롤에&nbsp;입력여부를&nbsp;감지하는&nbsp;컴포넌트
	@author&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	input[type=text]&nbsp;또는&nbsp;textarea와&nbsp;같은&nbsp;입력&nbsp;컨트롤에&nbsp;입력여부를&nbsp;감지하는&nbsp;컴포넌트
	jindo.WatchInput&nbsp;컴포넌트는&nbsp;Input&nbsp;Control의&nbsp;입력&nbsp;값&nbsp;변화를&nbsp;감지합니다.
	IE에서는&nbsp;&quot;keyup&quot;&nbsp;이벤트를&nbsp;감지하고,&nbsp;그외의&nbsp;브라우저에서는&nbsp;focus되었을때&nbsp;이전&nbsp;값에서의&nbsp;변화를&nbsp;비교하는&nbsp;타이머가&nbsp;시작되고&nbsp;blur되었을때&nbsp;타이머가&nbsp;종료된다.
	
	@class&nbsp;jindo.WatchInput
	@extends&nbsp;jindo.UIComponent
	@uses&nbsp;jindo.Timer
	
	@keyword&nbsp;watchinput,&nbsp;watch,&nbsp;input,&nbsp;textarea,&nbsp;왓치인풋
**/
jindo.WatchInput&nbsp;=&nbsp;jindo.$Class({

	/**&nbsp;@lends&nbsp;jindo.WatchInput.prototype&nbsp;*/
	
	_bTimerRunning&nbsp;:&nbsp;false,
	_bFocused&nbsp;:&nbsp;false,
	_sPrevValue&nbsp;:&nbsp;&quot;&quot;,
	

	/**
		WatchInput&nbsp;컴포넌트를&nbsp;생성한다.
		
		@constructor
		@param&nbsp;{String&nbsp;|&nbsp;HTMLElement}&nbsp;sInputId&nbsp;적용할&nbsp;입력&nbsp;컨트롤의&nbsp;id혹은&nbsp;엘리먼트&nbsp;자체
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;객체
			@param&nbsp;{Number}&nbsp;[htOption.nInterval=100]&nbsp;변화를&nbsp;확인할&nbsp;시간&nbsp;간격&nbsp;(IE에서는&nbsp;타이머로&nbsp;체크하지&nbsp;않아&nbsp;bUseTimerOnIE&nbsp;옵션을&nbsp;&#39;true&#39;로&nbsp;설정하지&nbsp;않는다면&nbsp;이&nbsp;옵션은&nbsp;적용되지&nbsp;않는다)
			@param&nbsp;{Boolean}&nbsp;[htOption.bUseTimerOnIE=false]&nbsp;IE에서도&nbsp;타이머로&nbsp;변화를&nbsp;확인할지&nbsp;여부.&nbsp;IE&nbsp;에서&nbsp;타이머로&nbsp;체크할&nbsp;경우&nbsp;true,&nbsp;그렇지&nbsp;않다면&nbsp;false로&nbsp;설정한다.
			@param&nbsp;{String}&nbsp;[htOption.sKeyEvent=&quot;keyup&quot;]&nbsp;IE에서&nbsp;감지할&nbsp;키보드이벤트명
			@param&nbsp;{Boolean}&nbsp;[htOption.bPermanent=false]&nbsp;focus와&nbsp;blur&nbsp;이벤트의&nbsp;발생&nbsp;여부와&nbsp;상관없이&nbsp;항상&nbsp;타이머로&nbsp;확인할지&nbsp;여부
			@param&nbsp;{Boolean}&nbsp;[htOption.bActivateOnload=true]&nbsp;로드시&nbsp;활성화&nbsp;여부.&nbsp;이&nbsp;옵션을&nbsp;false로&nbsp;설정하였을&nbsp;경우,&nbsp;start&nbsp;메서드를&nbsp;이용해&nbsp;활성화&nbsp;시킬&nbsp;수&nbsp;있다.
		@example
			var&nbsp;oWatchInput&nbsp;=&nbsp;new&nbsp;jindo.WatchInput(&quot;input&quot;,&nbsp;{
				nInterval&nbsp;:&nbsp;100,&nbsp;//Check할&nbsp;간격&nbsp;(IE제외)
				bUseTimerOnIE&nbsp;:&nbsp;false,&nbsp;//IE에서&nbsp;키보드&nbsp;이벤트를&nbsp;사용해서&nbsp;감지할&nbsp;경우&nbsp;false로&nbsp;지정.&nbsp;다른&nbsp;브라우저처럼&nbsp;타이머로&nbsp;체크하고자하는&nbsp;경우&nbsp;true로&nbsp;설정
				sKeyEvent&nbsp;:&nbsp;&quot;keyup&quot;,&nbsp;//attach할&nbsp;키보드&nbsp;이벤트&nbsp;(IE만&nbsp;해당)
				bPermanent&nbsp;:&nbsp;false,&nbsp;//입력창의&nbsp;focus/blur에&nbsp;상관없이&nbsp;항상&nbsp;타이머가&nbsp;동작할지&nbsp;여부.&nbsp;중단을&nbsp;위해서&nbsp;반드시&nbsp;stop()이나&nbsp;deactivate()메서드&nbsp;호출&nbsp;필요.(IE제외)&nbsp;
				bActivateOnload&nbsp;:&nbsp;true&nbsp;//로드시&nbsp;activate()&nbsp;수행여부
			}).attach({
				start&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//감지를&nbsp;시작했을&nbsp;때&nbsp;발생
				},
				stop&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//감지를&nbsp;중단했을&nbsp;때&nbsp;발생
				},
				focus&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//입력&nbsp;컨트롤에&nbsp;focus되었을&nbsp;때&nbsp;발생
				},
				blur&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//입력&nbsp;컨트롤에&nbsp;blur(포커스&nbsp;해제)되었을&nbsp;때&nbsp;발생
				},
				timerStart&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//IE를&nbsp;제외한&nbsp;브라우저에서는&nbsp;한글입력시&nbsp;KeyEvent이벤트가&nbsp;발생하지&nbsp;않으므로&nbsp;timer를&nbsp;이용해&nbsp;감지한다
					//timer가&nbsp;시작됬을&nbsp;때&nbsp;발생
				},
				change&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//입력&nbsp;컨트롤&nbsp;값이&nbsp;변경&nbsp;되었을&nbsp;경우&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	elInput&nbsp;:&nbsp;(HTMLElement)&nbsp;입력&nbsp;컨트롤
					//	sText&nbsp;:&nbsp;(String)&nbsp;변화된&nbsp;input의&nbsp;값
					//}
				},
				timerStop&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//IE를&nbsp;제외한&nbsp;브라우저에서는&nbsp;한글입력시&nbsp;KeyEvent이벤트가&nbsp;발생하지&nbsp;않으므로&nbsp;timer를&nbsp;이용해&nbsp;감지한다
					//timer가&nbsp;중지됬을&nbsp;때&nbsp;발생
				}
			});
			
	**/
	$init&nbsp;:&nbsp;function(sInputId,&nbsp;htOption)&nbsp;{
		var&nbsp;htDefaultOption&nbsp;=&nbsp;{
			nInterval&nbsp;:&nbsp;100,&nbsp;//Check할&nbsp;간격&nbsp;(IE제외)
			bUseTimerOnIE&nbsp;:&nbsp;false,&nbsp;//IE에서&nbsp;키보드&nbsp;이벤트를&nbsp;사용해서&nbsp;감지할&nbsp;경우&nbsp;false로&nbsp;지정.&nbsp;다른&nbsp;브라우저처럼&nbsp;타이머로&nbsp;체크하고자하는&nbsp;경우&nbsp;true로&nbsp;설정
			sKeyEvent&nbsp;:&nbsp;&quot;keyup&quot;,&nbsp;//attach할&nbsp;키보드&nbsp;이벤트&nbsp;(IE만&nbsp;해당)
			bPermanent&nbsp;:&nbsp;false,&nbsp;//입력창의&nbsp;focus/blur에&nbsp;상관없이&nbsp;항상&nbsp;타이머가&nbsp;동작할지&nbsp;여부.&nbsp;중단을&nbsp;위해서&nbsp;반드시&nbsp;stop()이나&nbsp;deactivate()메서드&nbsp;호출&nbsp;필요.(IE제외)&nbsp;
			bActivateOnload&nbsp;:&nbsp;true&nbsp;//로드시&nbsp;activate()&nbsp;수행여부
		};
		
		this.option(htDefaultOption);
		this.option(htOption&nbsp;||&nbsp;{});
		
		this._elInput&nbsp;=&nbsp;jindo.$(sInputId);
		this._oTimer&nbsp;=&nbsp;new&nbsp;jindo.Timer();
		
		this._bIE&nbsp;=&nbsp;jindo.$Agent().navigator().ie;
		this._wfFocus&nbsp;=&nbsp;jindo.$Fn(this._onFocus,&nbsp;this);
		this._wfBlur&nbsp;=&nbsp;jindo.$Fn(this._onBlur,&nbsp;this);
		this._wfKeyEvent&nbsp;=&nbsp;jindo.$Fn(this._onKeyEvent,&nbsp;this);
		this._wfStartTimer&nbsp;=&nbsp;jindo.$Fn(this._startTimer,&nbsp;this);
		this._wfStopTimer&nbsp;=&nbsp;jindo.$Fn(this._stopTimer,&nbsp;this);
		
		if&nbsp;(this.option(&quot;bActivateOnload&quot;))&nbsp;{
			this.activate(true);
		}
	},
	
	/**
		WatchInput이&nbsp;적용된&nbsp;Input&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getInput
		@return&nbsp;{HTMLElement}
	**/
	getInput&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elInput;
	},
	
	/**
		WatchInput이&nbsp;적용된&nbsp;Input&nbsp;엘리먼트의&nbsp;value를&nbsp;설정한다.
		
		@method&nbsp;setInputValue
		@remark&nbsp;WatchInput이&nbsp;적용된&nbsp;Input&nbsp;엘리먼트의&nbsp;값을&nbsp;키입력&nbsp;외에&nbsp;임의로&nbsp;변경할&nbsp;때에는&nbsp;이&nbsp;메서드를&nbsp;사용하는&nbsp;것을&nbsp;권장한다.
		@return&nbsp;{this}
		@see&nbsp;setCompareValue
		@example
			//input&nbsp;값을&nbsp;변경할&nbsp;경우
			oWatchInput.setInputValue(&quot;테스트&quot;);
			
			//또는&nbsp;아래와&nbsp;같이&nbsp;사용한다.
			oWatchInput.getInput().value&nbsp;=&nbsp;&quot;테스트&quot;;
			oWatchInput.setCompareValue(&quot;테스트&quot;);&nbsp;//input의&nbsp;value와&nbsp;같은&nbsp;값으로&nbsp;설정한다.
	**/
	setInputValue&nbsp;:&nbsp;function(s)&nbsp;{
		this.getInput().value&nbsp;=&nbsp;s;
		this.setCompareValue(s);
		return&nbsp;this;
	},	
	
	/**
		현재의&nbsp;input&nbsp;value와&nbsp;비교될&nbsp;이전&nbsp;Input의&nbsp;value를&nbsp;구한다.
		
		@method&nbsp;getCompareValue
		@return&nbsp;{String}&nbsp;
	**/
	getCompareValue&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._sPrevValue;
	},
	
	/**
		현재의&nbsp;input&nbsp;value와&nbsp;비교할&nbsp;값을&nbsp;설정한다.
		
		@method&nbsp;setCompareValue
		@remark&nbsp;IE의&nbsp;keydown이&nbsp;발생하지&nbsp;않거나&nbsp;FF의&nbsp;timer가&nbsp;동작하지&nbsp;않는&nbsp;상황에서&nbsp;input의&nbsp;value를&nbsp;변경하면&nbsp;예기치&nbsp;않은&nbsp;change이벤트가&nbsp;발생하기&nbsp;때문에&nbsp;변경된&nbsp;값과&nbsp;동일하게&nbsp;비교할&nbsp;값을&nbsp;설정하여&nbsp;예외처리한다.
		@param&nbsp;{String}&nbsp;s&nbsp;비교할&nbsp;값
		@return&nbsp;{this}
		@example
			oWatchInput.getInput().value&nbsp;=&nbsp;&quot;테스트&quot;;
			oWatchInput.setCompareValue(&quot;테스트&quot;);&nbsp;//input의&nbsp;value와&nbsp;같은&nbsp;값으로&nbsp;설정한다.
	**/
	setCompareValue&nbsp;:&nbsp;function(s)&nbsp;{
		this._sPrevValue&nbsp;=&nbsp;s;
		return&nbsp;this;
	},
	
	/**
		이전&nbsp;값과의&nbsp;비교없이&nbsp;강제로&nbsp;change&nbsp;이벤트를&nbsp;발생시킨다.
		
		@method&nbsp;fireChangeEvent
		@return&nbsp;{this}
	**/
	fireChangeEvent&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;elInput&nbsp;=&nbsp;this.getInput(),
			sValue&nbsp;=&nbsp;elInput.value;
		this.setCompareValue(sValue);
		/**
			입력&nbsp;컨트롤의&nbsp;값이&nbsp;변경되었을&nbsp;때&nbsp;발생
			
			@event&nbsp;change
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;elInput&nbsp;Input&nbsp;Control
			@param&nbsp;{String}&nbsp;sText&nbsp;Input&nbsp;Control의&nbsp;변경된&nbsp;값
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oWatchInput.attach(&quot;change&quot;,&nbsp;function(oCustomEvent){
					alert(&#39;변경된&nbsp;값은&nbsp;:&nbsp;&#39;&nbsp;+&nbsp;oCustomEvent.sText&nbsp;+&nbsp;&#39;&nbsp;입니다&#39;);
				});
		**/
		this.fireEvent(&quot;change&quot;,&nbsp;{
			elInput&nbsp;:&nbsp;elInput,&nbsp;
			sText&nbsp;:&nbsp;sValue
		});
		return&nbsp;this;
	},
	
	/**
		감지를&nbsp;시작한다.
		감지의&nbsp;중단은&nbsp;인터벌&nbsp;시간&nbsp;이후에&nbsp;일어난다.
		IE에서는&nbsp;KeyEvent&nbsp;이벤트를&nbsp;감지한다.
		그외의&nbsp;브라우저에서는&nbsp;input에&nbsp;focus되면&nbsp;Timer를&nbsp;사용해&nbsp;주기적인&nbsp;비교가&nbsp;시작되고&nbsp;blur시&nbsp;중단된다.
		
		@method&nbsp;start
		@param&nbsp;{Boolean}&nbsp;bCompareOnce&nbsp;초기화이후&nbsp;IE의&nbsp;키보드&nbsp;이벤트와&nbsp;그외&nbsp;브라우저의&nbsp;Focus이후&nbsp;Timer동작과&nbsp;상관없이&nbsp;최초&nbsp;1회&nbsp;비교할지&nbsp;여부
		@deprecated&nbsp;activate()&nbsp;사용권장
	**/
	start&nbsp;:&nbsp;function(bCompareOnce)&nbsp;{
		return&nbsp;this.activate(bCompareOnce&nbsp;||&nbsp;false);
	},
	
	/**
		감지를&nbsp;중단한다.
		
		@method&nbsp;stop
		@deprecated&nbsp;deactivate()&nbsp;사용권장
	**/
	stop&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this.deactivate();
	},
	
	/**
		컴포넌트를&nbsp;활성화한다.
		@param&nbsp;{Boolean}&nbsp;bCompareOnce&nbsp;초기화이후&nbsp;IE의&nbsp;키보드&nbsp;이벤트와&nbsp;그외&nbsp;브라우저의&nbsp;Focus이후&nbsp;Timer동작과&nbsp;상관없이&nbsp;최초&nbsp;1회&nbsp;비교할지&nbsp;여부
		@return&nbsp;{this}
	**/
	_onActivate&nbsp;:&nbsp;function(bCompareOnce)&nbsp;{
		this.setCompareValue(&quot;&quot;);
		var&nbsp;elInput&nbsp;=&nbsp;this.getInput();
		
		this._wfFocus.attach(elInput,&nbsp;&quot;focus&quot;);
		if(this._bIE&nbsp;&amp;&amp;&nbsp;!this.option(&quot;bUseTimerOnIE&quot;))&nbsp;{
			/**
				컴포넌트가&nbsp;활성화&nbsp;되었을&nbsp;때&nbsp;(start&nbsp;메서드를&nbsp;실행하면&nbsp;컴포넌트가&nbsp;활성화된다)
				
				@event&nbsp;start
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oWatchInput.attach(&quot;start&quot;,&nbsp;function(oCustomEvent){
						alert(&#39;컴포넌트&nbsp;감지&nbsp;시작&#39;);
					});
			**/
			this.fireEvent(&quot;start&quot;);
			this._wfKeyEvent.attach(elInput,&nbsp;this.option(&quot;sKeyEvent&quot;));	
		}&nbsp;else&nbsp;{
			if&nbsp;(this._isTimerRunning())&nbsp;{
				return;
			}
			
			this.fireEvent(&quot;start&quot;);
			if&nbsp;(this.option(&quot;bPermanent&quot;))&nbsp;{
				this._startTimer();
			}&nbsp;else&nbsp;{
				this._wfStartTimer.attach(elInput,&nbsp;&quot;focus&quot;);
				this._wfStopTimer.attach(elInput,&nbsp;&quot;blur&quot;);
			}
		}
		
		this._wfBlur.attach(elInput,&nbsp;&quot;blur&quot;);
		
		if&nbsp;(bCompareOnce&nbsp;||&nbsp;false)&nbsp;{
			this.compare();
		}
	},

	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;elInput&nbsp;=&nbsp;this.getInput();
		this._wfFocus.detach(elInput,&nbsp;&quot;focus&quot;);
		this._wfKeyEvent.detach(elInput,&nbsp;this.option(&quot;sKeyEvent&quot;));
		this._stopTimer();
		this._wfStartTimer.detach(elInput,&nbsp;&quot;focus&quot;);
		this._wfStopTimer.detach(elInput,&nbsp;&quot;blur&quot;);
		this._wfBlur.detach(elInput,&nbsp;&quot;blur&quot;);
		/**
			컴포넌트가&nbsp;비활성화&nbsp;되었을&nbsp;때&nbsp;(stop&nbsp;메서드를&nbsp;실행하면&nbsp;컴포넌트가&nbsp;비활성화된다)
			
			@event&nbsp;stop
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oWatchInput.attach(&quot;stop&quot;,&nbsp;function(oCustomEvent){
					alert(&#39;컴포넌트&nbsp;감지&nbsp;정지&#39;);
				});
		**/
		this.fireEvent(&quot;stop&quot;);
	},
	
	/**
		&nbsp;값을&nbsp;비교할&nbsp;시간&nbsp;간격을&nbsp;가져온다.
		
		@method&nbsp;getInterval
		@return&nbsp;{Number}&nbsp;ms&nbsp;단위의&nbsp;시간&nbsp;
	**/
	getInterval&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this.option(&quot;nInterval&quot;);
	},
	
	/**
		&nbsp;값을&nbsp;비교할&nbsp;시간&nbsp;간격을&nbsp;설정한다.
		
		@method&nbsp;setInterval
		@remark&nbsp;IE제외
		@param&nbsp;{Number}&nbsp;n&nbsp;시간&nbsp;간격&nbsp;(ms)
		@return&nbsp;{this}
	**/
	setInterval&nbsp;:&nbsp;function(n)&nbsp;{
		this.option(&quot;nInterval&quot;,&nbsp;n);
		return&nbsp;this;
	},
	
	_isTimerRunning&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._bTimerRunning;
	},
	
	_startTimer&nbsp;:&nbsp;function()&nbsp;{
		if(this._isTimerRunning())&nbsp;{
			return;
		}
		
		this._bTimerRunning&nbsp;=&nbsp;true;
		/**
			타이머가&nbsp;시작되었을&nbsp;때&nbsp;발생
			
			@event&nbsp;timerStart
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oWatchInput.attach(&quot;timerStart&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&quot;timerStart&quot;);
		this.compare();
		
		var&nbsp;self&nbsp;=&nbsp;this;
		this._oTimer.start(function(){
			self.compare();
			return&nbsp;true;
		},&nbsp;this.getInterval());
	},
	
	_stopTimer&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this._isTimerRunning())&nbsp;{
			this._oTimer.abort();
			this._bTimerRunning&nbsp;=&nbsp;false;
			this.compare();&nbsp;//타이머를&nbsp;중지하고&nbsp;비교&nbsp;1회수행
			/**
				타이머가&nbsp;정지되었을&nbsp;때&nbsp;발생
				
				@event&nbsp;timerStop
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oWatchInput.attach(&quot;timerStop&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
			**/
			this.fireEvent(&quot;timerStop&quot;);
		}
	},
	
	_onKeyEvent&nbsp;:&nbsp;function()&nbsp;{
		this.compare();
	},	
	
	_onFocus&nbsp;:&nbsp;function()&nbsp;{
		this._bFocused&nbsp;=&nbsp;true;
		/**
			입력&nbsp;컨트롤이&nbsp;포커스&nbsp;되었을&nbsp;때&nbsp;발생
			
			@event&nbsp;focus
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oWatchInput.attach(&quot;focus&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&quot;focus&quot;);
	},
	
	_onBlur&nbsp;:&nbsp;function()&nbsp;{
		this._bFocused&nbsp;=&nbsp;false;
		/**
			입력&nbsp;컨트롤의&nbsp;포커스가&nbsp;해제되었을&nbsp;때&nbsp;발생
			
			@event&nbsp;blur
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oWatchInput.attach(&quot;blur&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&quot;blur&quot;);
	},
	
	/**
		이전의&nbsp;비교&nbsp;값과&nbsp;현재&nbsp;설정된&nbsp;값을&nbsp;강제&nbsp;비교한다.
		
		@method&nbsp;compare
		@remark&nbsp;IE에서의&nbsp;key이벤트나,&nbsp;기타&nbsp;브라우저의&nbsp;timer&nbsp;동작과&nbsp;관계없이&nbsp;즉시&nbsp;비교를&nbsp;수행한다.&nbsp;(즉,&nbsp;Text&nbsp;Input에&nbsp;focus될&nbsp;필요가&nbsp;없다.)&nbsp;수행후&nbsp;값이&nbsp;바뀐경우&nbsp;change&nbsp;커스텀&nbsp;이벤트를&nbsp;발생한다.
		@return&nbsp;{this}
	**/
	compare&nbsp;:&nbsp;function(){
		if&nbsp;(this.getInput().value&nbsp;!=&nbsp;this.getCompareValue())&nbsp;{
			this.fireChangeEvent();						
		}
		return&nbsp;this;
	}
}).extend(jindo.UIComponent);</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>